<template>
  <div class="help-root">
    <div style="width: 100%;text-align: center;margin-bottom: 30px;">
      <el-button-group>
        <el-button class="bjs-button" size="mini" @click="showCache">显示本地缓存</el-button>
<!--        <el-button class="bjs-button" size="mini" @click="clearCache">清空本地缓存</el-button>-->
        <el-button class="bjs-button" size="mini" @click="refreshDict">清空字典缓存</el-button>
        <el-button class="bjs-button" size="mini" @click="clearParams">清空参数缓存</el-button>
      </el-button-group>
    </div>
    <el-collapse accordion v-model="activeName" class="help-collapse">
      <el-collapse-item title="登陆" name="1" class="login-help">
        <div>服务器地址需要以 <span>[ http:// ]</span> 或 <span>[ https:// ]</span>  开头</div>
        <div>服务器地址结尾不要加 <span>/</span></div>
      </el-collapse-item>
      <el-collapse-item title="计划" name="2">
        <div><em>开发中</em></div>
      </el-collapse-item>
      <el-collapse-item title="照片墙" name="3">
        <div>通过 <strong style="color:indianred;">Forest Secret</strong> 管理图片</div>
        <div><em>若上传时未登陆,则后台不会收录该文件,即不会显示在照片墙中.</em></div>
      </el-collapse-item>
      <el-collapse-item title="文章" name="5">
        <div><em>TODO</em></div>
      </el-collapse-item>
    </el-collapse>

    <el-dialog
      class="bjs-dialog"
      style="margin-top: -10px"
      append-to-body
      title="缓存"
      width="50%"
      :visible.sync="cacheShow"
    >
      <el-input
          disabled
          class="cache-textarea" resize="none" type="textarea" :rows="15" v-model="allCacheMsg"></el-input>
      <span slot="footer">
        <el-button class="bjs-button" size="mini" @click="cacheShow = false">取 消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { refreshDict } from '../../../api/dict.js'
import { clearParams } from '../../../api/param.js'
export default {
  name: "help",
  data() {
    return {
      activeName: '1',
      cacheShow: false,
      userInfo: '',
      login: '',
      os: '',
      screenshot: '',
      allCacheMsg: ''
    }
  },
  methods : {
    showCache () {
      this.allCacheMsg =
        this.formatJson(this.$store.state.config.userInfo) +
        this.formatJson(this.$store.state.config.login) +
        this.formatJson(this.$store.state.config.os) +
        this.formatJson(this.$store.state.config.screenshot)
      this.cacheShow  = !this.cacheShow
    },
    clearCache () {
      this.$store.commit('CLEAR_CACHE_USERINFO')
      this.$store.commit('CLEAR_CACHE_TOKEN')
    },
    refreshDict () {
      refreshDict().then(() => {
        this.$bjsNotify.success("刷新字典成功")
      })
    },
    clearParams () {
      clearParams().then(() => {
        this.$bjsNotify.success("清除参数成功")
      })
    },
    formatJson (msg) {
      var rep = '~'
      var jsonStr = JSON.stringify(msg, null, rep)
      var str = ''
      for (var i = 0; i < jsonStr.length; i++) {
        var text2 = jsonStr.charAt(i)
        if (i > 1) {
          let text = jsonStr.charAt(i - 1)
          if (rep !== text && rep === text2) {
            // str += '\n'
          }
        }
        str += text2
      }
      jsonStr = ''
      for (let i = 0; i < str.length; i++) {
        let text = str.charAt(i)
        if (rep === text) {
          jsonStr += '    '
        } else {
          jsonStr += text
        }
        if (i === str.length - 2) {
          jsonStr += '\n'
        }
      }
      return jsonStr
    }
  }
}
</script>

<style scoped lang="scss">
  .help-root {
    height: 500px;
    overflow: auto;


    .help-collapse {
      margin-left: 10px;

      [data-theme="night"] & {
        border-top: 1px solid $theme-color-night-dark-3;
      }

      /deep/ .el-collapse-item__header {
        font-size: 15px;
        @include bg_color();

        [data-theme="light"] & {
          color: $theme-color-light;
        }
        [data-theme="night"] & {
          color: #4a4a4a;
          border-bottom: 1px solid $theme-color-night-dark-3;
        }
      }

      /deep/ .is-active {
        font-weight: bold;
        [data-theme="night"] & {
          color: $theme-color-night-dark !important;
        }
      }

      /deep/ .el-collapse-item__content {
        padding: 20px;
        font-size: 12px;
        color: #9a9a9a;
        [data-theme="night"] & {
          color: #989d9f !important;
        }
      }
      /deep/ .el-collapse-item__wrap {
        [data-theme="night"] & {
          background-color: $theme-bg-color-night;
          border-bottom-color: $theme-bg-color-night;
        }
      }
    }
  }

  .login-help {
    span {
      font-size: 15px;
      font-weight: bold;
      @include color();
    }
  }


  .author-url {
    font-size: 12px;
    cursor: pointer;
    @include color();
  }

  .cache-textarea {
    /deep/ .el-textarea__inner {
      font-size: 12px !important;
      color: #5a5a5a !important;

      [data-theme="night"] & {
        color: #8a8a8a !important;
        border-color: $theme-color-night-dark-3;
        background-color: $theme-bg-color-night;
      }
    }
  }


</style>
